<div id="operadorMapa">
      
<script src="https://maps.google.com/maps?file=api&v=2&key=AIzaSyAgenDXkjeAXE7YNVaUJVr1AZ_KqUTjKuE&sensor=true" type="text/javascript">
</script>

 
    
<div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black; "></div>
    <div id="route" style="width: 25%; height:480px; float:right; border: 1px solid black; "></div>

<script type="text/javascript">
    $("#menuTop").hide();
        var map;
        var directionsPanel;
        var directions;
        
           map = new GMap2(document.getElementById("map_canvas"));
           map.setCenter(new GLatLng(42.351505,-71.094455), 1);
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
           directionsPanel = document.getElementById("route");
           directions = new GDirections(map, directionsPanel);
           
            var polyline = new GPolyline([
                new GLatLng(37.4419, -122.1419),
                new GLatLng(37.4519, -122.1519)
            ], "#ff0000", 10);
            map.addOverlay(polyline);
           
                  <?php 
                  
                      echo "directions.load(\"from: $rutaServicio[0] to: $rutaServicio[1] to: $rutaServicio[2] \");";
                      
                 ?>
           
           directionsPanel = document.getElementById("route");
           
      
      function abrir(){
          $("#map_canvas").show();
          $("#route").show();
          
      }
      
             
           
</script>

</div>